@import '../../var.scss';
page {
  background-color: $ranks-bgcolor;
}
.title {
  font-weight: 600;
  font-size: 36rpx;
}
.containers {
  .tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 554rpx;
    margin: 20rpx auto 0;
    .tab-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 116rpx;
      height: 42rpx;
      color: $bgcolor-light;
      font-size: 22rpx;
      background-color: #2caad6;
      border-radius: 21rpx;
    }
    .active {
      color: #000000;
      background-color: $bgcolor-light;
    }
  }
}
.content {
  position: relative;
  width: 690rpx;
  height: 75%;
  margin: 112rpx auto 0rpx;
  background-color: $bgcolor-light;
  border-radius: 20rpx;
  .header {
    display: flex;
    width: 100%;
    .headerList {
      position: relative;
      width: 230rpx;
      height: 343rpx;
      background: $bgcolor-light;
      border-radius: 20rpx;
      &:nth-child(1) {
        top: -55rpx;
        order: 2;
        box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.09);
      }
      &:nth-child(2) {
        order: 1;
      }
      &:nth-child(3) {
        order: 3;
      }
      .rankNumber {
        position: absolute;
        top: -26rpx;
        left: 96rpx;
        width: 40rpx;
        height: 48rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .topicImg {
        width: 120rpx;
        height: 120rpx;
        margin: 50rpx auto 0;
        overflow: hidden;
        border-radius: 12rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        width: 100%;
        margin-top: 20rpx;
        font-size: 28rpx;
        text-align: center;
      }
      .listTitle {
        width: 100%;
        margin-top: 15rpx;
        color: $info-color;
        font-size: 20rpx;
        text-align: center;
      }
      .num {
        width: 100%;
        margin-top: 15rpx;
        color: $primary-color;
        font-size: 30rpx;
        text-align: center;
      }
    }
  }
  .scrollBox {
    height: 60%;
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 580rpx;
      height: 110rpx;
      margin: auto;
      border-bottom: 1rpx solid $border-color;
      .left {
        display: flex;
        align-items: center;
        .ranksBox {
          display: flex;
          align-items: flex-start;
          justify-content: center;
          width: 28rpx;
          height: 34rpx;
          color: $bgcolor-light;
          font-size: 20rpx;
          background: url('')
            no-repeat;
          background-size: 100% 100%;
        }
        .topic-avatar {
          width: 52rpx;
          height: 52rpx;
          margin-left: 43rpx;
          border-radius: 6rpx;
        }
        .topic-name {
          margin-left: 20rpx;
          color: $title-color;
          font-size: 24rpx;
        }
      }
      .right {
        padding-right: 25rpx;
        color: $primary-color;
        font-size: 24rpx;
      }
    }
  }
  .bottomBox {
    position: absolute;
    bottom: 0rpx;
    width: 100%;
    height: 8%;
    background-color: $bgcolor-light;
    border-radius: 20rpx;
    .self {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: $info-color;
      font-size: 20rpx;
      .cat {
        width: 28rpx;
        height: 28rpx;
        margin: 0 7rpx 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
      text {
        margin-right: 7rpx;
        color: $title-color;
      }
    }
  }
}
